<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@include file="../../pccommon.jsp"%>
<%
	String basePath = request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
	String servletPath = request.getServletPath();
%>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="${staticPath}/pccss/style.css" />
<link type="text/css" rel="stylesheet" href="${staticPath}/js/myPagination/css/page.css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${goods.name}</title>
<style type="text/css">
<!--
#operate_form .btn_disabled{
	background-color: gray;
}
.yListr form .YImmediatelyininstallment.single_buy{
	background:#8fbd51;
}
.jiathis_style a{
	float: left;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    margin-left: 15px;
}
.spec-hl-bg {
    padding: 4px 0 4px 0;
    background-color: #ffe6e6;
}
.goodsSpec .spec_em.em_disabled  {
    border: 1px dashed #ccc;
    cursor: not-allowed;
    color: #999;
}
#goods_time{
	background: #2196f3 url(${staticPath}/images/time-spike.png)  10px 0px no-repeat;
    text-indent: 35px;
    font-size: 14px;
    color: #333333;
    line-height: 22px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <c:import url="../layout/header1.jsp"></c:import>   
  <input type="hidden" id="goods_id" value="${goods.id}" /> 
  <input type="hidden" id="sku_id" value="${goodsSku.id}" /> 
  <input type="hidden" id="sku_state" value="${goodsSku.state}" /> 
  <input type="hidden" id="sku_inventory" value="" /> 
  <input type="hidden" id="goods_time_info_state" value="${goodsTimeInfo[0]}" /> 
  <input type="hidden" id="goods_time_info_sec" value="${goodsTimeInfo[1]}" /> 
  <!--nav end-->
  <div id="mainlist">
     <div id="main" style="padding-top:20px;">
       <div class="mainlist11">
         <a href="<%=appPath%>/index.htm" target="_blank">首页 ></a>
         <c:forEach items="${goodsClassList}" var="goodsClass" >
	         <a href="<%=appPath%>/goods/list.htm?goodsClassId=${goodsClass.id}" >${goodsClass.name} ></a>
         </c:forEach>
         <p>${goods.name}</p>
       </div>
       <div class="maincont">
         <div class="maincontle">
           <div class="preview">
	         <div id="vertical" class="bigImg">
		      <!-- 
		      <img src="mid/05.jpg" width="580" height="580" alt="" id="midimg" />
		       -->
		      <img src="${goods.image}" width="580" height="580" alt="" id="midimg" />
		      <div style="display:none;" id="winSelector"></div>
	         </div><!--bigImg end-->	
	         <div class="smallImg">
		       <div class="scrollbutton smallImgUp disabled"></div>
		       <div id="imageMenu">
			   <ul>
				 <c:forEach items="${goodsImageList}" var="goodsImage" varStatus="index">
		        	<c:if test="${index.index==0}">
			        	<c:set var="shareImage"  value="${goodsImage.imgurl}" />
				     </c:if>
		        	<li id="${index.index==0?'onlickImg':''}"  ><img src="${goodsImage.imgurl}" width="68" height="68" alt=""/></li>
		        	<!-- 
			        <div class="swiper-slide" ${index.index==0?'id=onlickImg':''}><img width="68" height="68" src="${goodsImage.imgurl}" /></div>
		        	 -->
        		</c:forEach>
			   </ul>
		       </div>
		       <div class="scrollbutton smallImgDown"></div>
	         </div><!--smallImg end-->	
	         <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>
           </div>
           <!--preview end-->
			<!-- 
            <div class="maincontle1 ">
             <p>分享到：</p>
             <img src="${staticPath}/pcimages/weixin.png" />
             <img src="${staticPath}/pcimages/xinlang.png" />
             <img src="${staticPath}/pcimages/qqkj.png" />
             <a href="javascript:favoriteGoods('${goods.id}','${goodsSku.id}');" target="_blank"><img src="${staticPath}/pcimages/shoucang.png" /></a>
             <p>加入收藏（已有${goods.collect==null?0:goods.collect}人收藏）</p>
           </div>
			 -->
           <div class="maincontle1 jiathis_style">
            <p>分享到：</p>
				<a class="jiathis_button_qzone"></a>
				<a class="jiathis_button_tsina"></a>
				<a class="jiathis_button_weixin"></a>
			<script type="text/javascript" >
			var jiathis_config={
				summary:"",
				shortUrl:false,
				hideMore:false
			}
			</script>
             <a href="javascript:favoriteGoods('${goods.id}','${goodsSku.id}');"><img  style="margin-top: 0;" src="${staticPath}/pcimages/shoucang.png" /></a>
             <p>加入收藏（已有${goods.collect==null?0:goods.collect}人收藏）</p>
           </div>
        </div>
        <div class="maincontr">
           <div class="yListr">
	        <p class="colorp00"><em>${goods.title}</em><br/><em style="font-size: 14px;">${goodsSku.subTitle}</em></p>
        	<!-- todo -->
        	<c:if test="${goodsTimeInfo!=null}">
	        	<div id="goods_time">
	        		<c:choose>
		        		<c:when test="${'1'==goodsTimeInfo[0]}">
			        		<span class="limit_msg">距离开始抢购还有</span>
		        		</c:when>
		        		<c:when test="${'2'==goodsTimeInfo[0]}">
			        		<span class="limit_msg">距离结束还有</span>
		        		</c:when>
		        		<c:when test="${'3'==goodsTimeInfo[0]}">
			        		<span class="limit_msg">抢购已结束</span>
		        		</c:when>
	        		</c:choose>
	        		<span>
	        			<span id="time_span"></span>
	        		</span>
	        	</div>
        	</c:if>
        	<div id="sku_prices_div">
        	</div>
        	<div style="clear: both;"></div>
	        <input type="hidden" id="skuCombinationsStr" value='${skuCombinationsStr}'/>
         	<input type="hidden" id="goodsSkuSpecId" value="${goodsSku.specId}"/>
				<ul id="spec_ul">
				   <c:forEach items="${goodsSpecList}" var="goodsSpec" varStatus="goodsSpecIndex">
						<li class="goodsSpec" specId="${goodsSpec.specClass.id}"  specName="${goodsSpec.specClass.name}" >
							<span >${goodsSpec.specClass.name}</span>
							<c:set var="temKey" value="goodsSpec${goodsSpec.id}"/>
							<c:forEach items="${goodsSpecMap[temKey]}" var="specValue">
								<em class="spec_em" id="spceValue${specValue.id}" specValueId="${specValue.id}" specValueName="${specValue.specName}">${specValue.specName}<i></i></em>
							</c:forEach>
						</li>
						<c:if test="${goodsSpecIndex.index==0 }">
						</c:if>
					</c:forEach>
		            <li>
						<span style="float:left;">数量：</span>
						<em style="border:none;margin-top:5px;float:left;"><input type="text" class="spinnerExample" id="goods_num" /></em>
					</li>
				</ul>
	        <p class="colorp00" style="font-size:14px;">库存：<em id="sku_inventory_em"></em>&nbsp;<em>件</em>
				<span>销量：<em>${goodsSku.salenum==null?0:goodsSku.salenum}&nbsp;</em>件</span>
			</p>
	        <form id="operate_form">
	             <c:choose>
		        	<c:when test="${3==goodsSku.state}">
						<a href="javascript:void(0);" id="point_buy" class="YImmediatelyininstallment opt_btn single_buy" style="float:left;">积分兑换</a>
		        	</c:when>
		        	<c:otherwise>
						<a href="javascript:void(0);" id="single_buy" class="YImmediatelyininstallment opt_btn single_buy" style="float:left;">立即购买</a>
				        <a href="javascript:void(0);" id="save_in_cart" class="YImmediatelyininstallment opt_btn" style="float:left;margin-left:20px;">加入购物车</a>
		        	</c:otherwise>
		        </c:choose>
	        </form>
			</div>
         </div>
       </div>
       <!--maincont end-->
     </div>
     <!--main end-->
     <div id="main" style="padding-top:20px;background:#fff;">
       <div class="maincont2left">
         <div class="maincont2leftt"><h1>热销推荐</h1></div>
         <c:forEach items="${hotSaleList}" var="hotGoods">
	         <div class="maincont21leftc" style="cursor: pointer;" onclick="javascript:location.href='<%=appPath%>/goods/${hotGoods.id}.htm'">
	           <img src="${hotGoods.image}" />
	           <a href="javascript:void(0)" target="_blank">${hotGoods.title}</a>
	         </div>
         </c:forEach>
         <c:if test="${relationGoodsList!=null&&fn:length(relationGoodsList)>0}">
          <div class="maincont2leftt"><h1>买了又买</h1></div>
         <c:forEach items="${relationGoodsList}" var="relationGoods">
         	 <c:if test="${relationGoods.state==1 }">
	         <div class="maincont21leftc"  style="cursor: pointer;" onclick="javascript:'location.href=<%=appPath%>/goods/${relationGoods.id}.htm'">
	           <img src="${relationGoods.image}" />
	           <a href="javascript:void(0)" target="_blank">${relationGoods.title}</a>
	         </div>
	         </c:if>
         </c:forEach>
         </c:if>
       </div>
       <div class="maincont2right">
         <div id="tabwrap">
		  <a href="javascript:navigate_tabs('a','first-tab');" class="buttons buttonHover" id="first-tab">商品详情</a>  
			<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">商品评价</a>
		<br clear="all" />
			<div id="tabbody">
				<div class="a">
                  <div class="maincont2right1">
                    <ul>
                      <li>产品名称：${goods.name}</li>
                      <%--
                      <c:forEach items="${goodsAttrList}" var="goodsAttr">
	                      <li>${goodsAttr.attrClassName }：${goodsAttr.attrValueName }</li>
                      </c:forEach>
                       --%>
		            <c:forEach items="${attrClassIds}" var="attrClassId">
		            	<c:set var="temKey" value="attrClass${attrClassId}"></c:set>
		            	 <c:forEach items="${goodsAttrMap[temKey]}" var="goodsAttr" varStatus="index">
                      	 	 <c:choose>
                      	 	 <c:when test="${index.index==0}">
	                      	 	 <c:set var="className" value="${goodsAttr.attrClassName}"/>
	                      	 	 <c:set var="attrValueName" value="${goodsAttr.attrValueName}"/>
                      	 	 </c:when>
                      	 	 <c:otherwise>
	                      	 	 <c:set var="attrValueName" value="${attrValueName}、${goodsAttr.attrValueName}"/>
                      	 	 </c:otherwise>
                      	 	 </c:choose>
                      	 </c:forEach>
	                      <li>${className}：${attrValueName }</li>
                      </c:forEach>
                    </ul>
                  </div>
	              <div id="goods_detail_div">
	                  	${goods.detail}
				  </div>
				</div>
				<div class="b">
				<div id="comment_div">
				
				</div>
				<div style="clear: both;"></div> 
       			<div id="page_div"></div>
				</div>
			</div>	
		 </div>
         <!--tab end-->
       </div>
     </div>
     <!--main end-->
  </div>
  <!--mainlist end-->
 <c:import url="../layout/footer.jsp"></c:import>
  <!-- footer end -->
  </div>
</body>
<script type="text/javascript" src="${staticPath}/js/jquery.spinner.js"></script>
<script type="text/javascript" src="${staticPath}/js/jquery.brower.js"></script>
<script type="text/javascript" src="${staticPath}/js/app/cart/cart.js"></script>
<script type="text/javascript" src="${staticPath}/js/app/goods/pc-detail.js"></script>
<script type="text/javascript" src="${staticPath}/js/ueditor/ueditor.parse.js"></script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<script type="text/javascript" src="${staticPath}/js/myPagination/js/jquery.myPagination.js"></script>
</html>